// 创建Vue类
class Vue {
  // 构造函数带入传入的数据
  constructor (options) {
    // 1、接收配置信息
    // 设置$options并设置默认值
    this.$options = options || {}
    // $data从$options中获取
    this.$data = this.$options.data
    // $el分两种情况，当传入的值是字符串那么就要自己寻找元素节点，否则直接使用元素节点即可
    this.$el = typeof this.$options.el === 'string' ? document.querySelector(this.$options.el) : this.$options.el
    // 2、注入数据，传入 Vue 类和 $data
    proxyData(this, this.$data)
    // 3、创建Observer实例 监听data变化
    new Observer(this.$data)
    new Compiler(this)
  }
  
}

// 使用数据劫持劫持data中的数据
function proxyData (Vue, data) {
  // 将data全部 key 组成数组然后遍历
  Object.keys(data).forEach(key => {
    // 使用 defineProperty 设置属性
    Object.defineProperty(Vue, key, {
      // 是否可遍历（默认false）
      enumerable: true,
      // 是否可再次设置（默认false）
      configurable: true,
      // get方法：直接返回数据
      get () {
        return data[key]
      },
      // set方法：直接修改
      set (newValue) {
        data[key] = newValue
      }
    } )
  })
}